<template>
  <div class="app-container">
    <el-card shadow="always">
      <div slot="header" class="clearfix">
        <span class="title-container">店铺信息</span>
        <el-button v-if="!isEdit" type="primary" @click="handleToUpdate" style="float: right; padding: 8px"
          size="large">点我修改</el-button>
      </div>
      <el-form :model="shopDetail" ref="shopDetail" status-icon label-position="left" label-width="100px"
        style="width: 900px; margin-left:50px;">
        <el-form-item label="商铺名">
          <el-input clearable :readonly="!isEdit" v-model="shopDetail.shopName"></el-input>
        </el-form-item>
        <el-form-item label="电话号码">
          <el-input clearable :readonly="!isEdit" v-model="shopDetail.phoneNumber"></el-input>
        </el-form-item>
        <el-form-item label="经营人">
          <el-input disabled v-model="shopDetail.operator"></el-input>
        </el-form-item>
        <el-form-item label="经营时间">
          <el-time-picker value-format="HH:mm" format="HH:mm" clearable :readonly="!isEdit" is-range
            v-model="shopDetail.businessHour" range-separator="至" start-placeholder="开始营业时间" end-placeholder="结束营业时间"
            placeholder="选择时间范围">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="店铺描述">
          <el-input clearable :readonly="!isEdit" type="textarea" v-model="shopDetail.description"></el-input>
        </el-form-item>
        <el-form-item label="商铺地址">
          <el-input clearable :readonly="!isEdit" type="textarea" v-model="shopDetail.address"></el-input>
        </el-form-item>
        <el-form-item label="封面图片">
          <el-upload v-if="isEdit" class="upload_box" :on-change="handleFileChange" :limit="limitNum" ref="upload"
            :class="{ uploadHide: hideUploadEdit }" :before-upload="beforeUpload" accept=".png, .jpg, .jpeg"
            :auto-upload="true" action="#" list-type="picture-card" :file-list="fileList" :http-request="handleUpload">
            <div slot="file" slot-scope="{file}">
              <img class="el-upload-list__item-thumbnail" :src="shopDetail.shopImg" alt="">
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span class="el-upload-list__item-delete" @click="handleDownload(file)">
                  <i class="el-icon-download"></i>
                </span>
                <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
            <i slot="default" :class="{ isHidden: hideUploadEdit }" class="el-icon-plus"></i>
          </el-upload>
          <el-image v-else style="width: 200px; height: 200px" :src="shopDetail.shopImg"></el-image>
        </el-form-item>
      </el-form>
      <el-divider></el-divider>
      <div v-if="isEdit" class="btn-container">
        <el-button :loading="isLoading" type="primary" @click="handleUpdate">更新</el-button>
        <el-button plain @click="handleCancel">取消</el-button>
      </div>
    </el-card>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import { shopDetail, addOrUpdate } from '@/api/shop'
import { getLabel } from "@/utils/index.js"
import { shopStatus } from "@/data/dict.js"
import Cookies from 'js-cookie'
import { uploadFileUnParam } from '@/api/file'

export default {
  name: 'ShopDetail',
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: "danger",
        1: "success",
        2: "info",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      isLoading: false,
      isEdit: false,
      limitNum: 1,
      isHidden: false,
      hideUploadEdit: false,
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      fileList: [],
      shopDetail: {
        shopImg: ""
      },
      shopStatus,
    }
  },
  created() {
    this.getData()
  },
  methods: {
    handleCancel() {
      this.isEdit = false;
    },
    handleToUpdate() {
      this.isEdit = true;
    },
    handleUpdate() {
      this.isLoading = true
      let params = { ...this.shopDetail }
      params.businessHour = this.shopDetail.businessHour[0] + "," + this.shopDetail.businessHour[1]
      delete params.operator
      addOrUpdate(params).then(res => {
        if (res.code === 200) {
          console.log('res====', res);
          this.isLoading = false
          this.$message.success("更新成功！")
          this.isEdit = false;
          this.getData();
        }
      })
    },
    // on-change添加文件，上传成功和上传失败时都会被调用
    handleFileChange(file, fileList) {
      this.hideUploadEdit = this.shopDetail.shopImg
      // console.log("this.fileList:", this.fileList);
      // console.log("this.hideUploadEdit:", this.hideUploadEdit);
    },
    // 选择文件确认上传
    beforeUpload(file) {
      const fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
      const allowFileType = ["jpg", "png", "jpeg"];
      if (allowFileType.indexOf(fileType) === -1) {
        this.$message.error("附件仅支持jpg/png/jpeg格式");
        return false;
      }
      const limit = file.size / 1024 / 1024 < 2;
      if (!limit) {
        this.$message.error("上传文件大小不能超过 2MB!");
      }
      return limit;
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    // 文件上传接口
    handleUpload(file) {
      const fromData = new FormData()
      fromData.append('file', file.file)
      uploadFileUnParam(fromData).then(res => {
        if (res.code === 200) {
          this.shopDetail.shopImg = res.data.fileUrl
          this.isHidden = true
          // this.fileList.push({ name: '', url: res.data.fileUrl })
          this.$message.success('图片上传成功')
        }
      })
    },
    getLabel,
    getData() {
      let params = {
        id: Cookies.get("shopId")
      }
      shopDetail(params).then(res => {
        if (res.code === 200) {
          this.shopDetail = res.data
          this.shopDetail.businessHour = (res.data.businessHour).split(",")
          console.log('res', res);
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.el-icon-plus {
  &.isHidden {
    display: none;
  }
}

.title-container {
  font-size: 18px;
  font-weight: bold;
}

.filter-item {
  margin-left: 20px;
  vertical-align: initial;

  &.add {
    float: right;
  }
}

.filter-input-container {
  margin-left: 0px
}

.btn-container {
  display: flex;
  justify-content: center;
  border: 1px solid #fefefe;
  width: 100%;
}

.user-detail-box {
  padding: 16px;
}

:deep(.el-drawer__header) {
  height: 20px;
  margin-bottom: 10px;
}

// 隐藏上传按钮
::v-deep .uploadBox_hide .el-upload--picture-card {
  display: none;
}
</style>
